<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="/user_css/common.css" />
    <link rel="stylesheet" href="/user_css/shopsManager.css" />
    <script type="text/javascript" src="/user_js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/user_js/common.js" ></script>
    <script type="text/javascript" src="/user_js/navTop.js"></script>
    <script type="text/javascript" src="/user_js/jquery.circliful.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
    <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
    <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
    <!--    xtiper插件css,js-->
    <link href="/xtiper_css/xtiper.css" type="text/css" rel="stylesheet"/>
    <script src="/xtiper_js/xtiper.js" type="text/javascript"></script>
    <script src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script src="/webjars/axios/0.19.0/dist/axios.min.js"></script>
</head>

<body>

<div id="vueBox">
    <!-- 内容  开始-->
    <div class="wrap">
        <div class="vip_cont c100 clearfix">
            <!--左边列表导航  开始-->
            <div class="fl vip_left vip_magLeft">
                <dl>
                    <dt>系统管家</dt>
                    <dd>
                        <p><a href="#" >费用缴纳</a></p>
                        <p><a href="sys_house.html">公寓信息查询</a></p>
                        <p><a href="#" >维修反馈</a></p>
                        <p><a href="#" >查阅公告</a></p>
                    </dd>
                </dl>
                <dl>
                    <dt>我的账号</dt>
                    <dd>
                        <p><a href="#" >基本资料</a></p>
                        <p><a href="#" >修改密码</a></p>
                        <p><a onclick="Logintc()" >退出登录</a></p>
                    </dd>
                </dl>
            </div>
            <!--左边列表导航  结束-->

            <!--右边列表内容  开始-->
            <div class="fr vip_right vip_magRight">
                <div style="margin-top: -20px">
                    <ol class="breadcrumb">
                        <li><a href="/sys_login.htmlin.html">登录首页</a></li>
                        <li><a href="/sys_index.htmlex.html">主页面</a></li>
                        <li class="active">公寓信息查询</li>
                    </ol>
                </div>
                <form class="form-inline" role="form" style ="padding-left: 100px;">
                    <div class="form-group" style="padding-left: 20px;">
                        <label >查找公寓信息:</label>
                        <input v-model="keyword"  type="text" class="form-control">
                        <button type="button" class="btn btn-primary" @click="selectHouse(1)">查询</button>

                    </div>
                </form>

                <table class="table table-bordered container">
                    <thead>
                    <tr>
                        <th>公寓序号</th>
                        <th>公寓法定人姓名</th>
                        <th>公寓法定人手机号</th>
                        <th>公寓法定人身份证号</th>
                        <th>公寓名称</th>
                        <th>公寓地址</th>
                        <th>系统公告</th>
                        <th>公寓日单价</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in houseList.list">
                        <td>{{item.id}}</td>
                        <td>{{item.frname}}</td>
                        <td>{{item.frphone}}</td>
                        <td>{{item.fridcard}}</td>
                        <td>{{item.housename}}</td>
                        <td>{{item.houseaddr}}</td>
                        <td>{{item.housenote}}</td>
                        <td>{{item.dayprice}}</td>
                        <td>
                            <button class="btn btn-success" @click="updateHouse(item.id)">修改</button>
                            <button class="btn btn-danger" @click="delHouse(item.id)">注销</button>

                        </td>
                    </tr>

                    </tbody>
                </table>
                <br>


                <div style="padding-left: 700px">
                    <ul class="pagination">
                        <li v-show="houseList.hasPreviousPage">
                            <a href="#" @click.stop="selectHouse(houseList.perPage)">&laquo;</a>
                        </li>
                        <li :class="{active:houseList.pageNum==i}" v-for=" i of houseList.navigatepageNums">
                            <a href="#" @click.stop="selectHouse(i)">{{i}}</a>
                        </li>
                        <li v-show="houseList.hasNextPage">
                            <a href="#" @click.stop="selectHouse(houseList.nextPage)">&raquo;</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--右边列表内容  结束-->



            <!--模态框-->
            <div class="modal" id="mymodal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button class="close" type="button" @click="hideModal(),clearForm()">&times;</button>
                            <div class="modal-title">
                                修改公寓信息
                            </div>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form">
                                <input type="text" id="id" v-model="new_house.id" hidden="hidden">
                                <div class="form-group">
                                    <span for="frname" class="col-sm-3 control-label">法人姓名:</span>
                                    <div class="col-sm-9">
                                        <input v-model="new_house.frname" id="frname" type="text" class="form-control" placeholder="请输入公寓法人姓名">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <span for="frphone" class="col-sm-3 control-label">法人手机号:</span>
                                    <div class="col-sm-9">
                                        <input v-model="new_house.frphone" id="frphone" type="text" class="form-control" placeholder="请输入公寓法人手机号"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <span for="fridcard" class="col-sm-3 control-label">法人身份证号:</span>
                                    <div class="col-sm-9">
                                        <input v-model="new_house.fridcard" id="fridcard" type="text" class="form-control" placeholder="请输入公寓法人身份证号">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <span for="housename" class="col-sm-3 control-label">公寓名称:</span>
                                    <div class="col-sm-9">
                                        <input v-model="new_house.housename" id="housename" type="text" class="form-control" placeholder="请输入公寓名称">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <span for="houseaddr" class="col-sm-3 control-label">公寓地址:</span>
                                    <div class="col-sm-9">
                                        <input v-model="new_house.houseaddr" id="houseaddr" type="text" class="form-control" placeholder="请输入公寓地址">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <span for="housenote" class="col-sm-3 control-label">系统公告:</span>
                                    <div class="col-sm-9">
                                        <input v-model="new_house.housenote" id="housenote" type="text" class="form-control" placeholder="请输入系统公告">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <span for="dayprice" class="col-sm-3 control-label">公寓日租金:</span>
                                    <div class="col-sm-9">
                                        <input v-model="new_house.dayprice" id="dayprice" type="text" class="form-control" placeholder="请输入公寓日租金">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-default" @click="hideModal(),clearForm()">关闭</button>
                            <button class="btn btn-primary" @click="saveModal()">保存</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</body>
</html>
<script type="application/javascript">
    function Logintc() {
        window.location.href="sys_login.html";
    }
    var vm=new Vue({
        el:"#vueBox",
        data:{
            houseList:{},
            keyword:"",
            pageNum:'',
            delResult:{},
            new_house:{id:null,frname:'',frphone:'',fridcard:'',housename:'',houseaddr:'',housenote:'',dayprice:''}

        },mounted(){
                this.selectHouse(1);
        },
        methods:{
                selectHouse:function (pageNum) {
                    axios({
                        url:"http://localhost:8083/query/house",
                        method:"get",
                        params:{keyword:this.keyword,pageNum:pageNum}
                    }).then(res=>{
                            this.houseList=res.data.data;
                            this.pageNum=  pageNum
                        })
                },
                delHouse:function (id) {
                    window.confirm("你确定要注销该公寓吗？")
                    axios({
                        url:"http://localhost:8083/delHouse",
                        method:"get",
                        params:{id:id}
                    }).then(res=>{
                        this.delResult=res.data
                        if (this.delResult.result=='SUCCESS'){
                            this.selectHouse(this.pageNum)
                            alert("注销成功")
                        }else{
                            alert(this.delResult.message)
                        }

                    })
                },
            showModal:function () {
                $('#mymodal').modal('show');
            },
            hideModal:function () {
                $('#mymodal').modal('hide');
            },
            clearForm:function () {
                $('#id').val(0);
                $('#frname').val('');
                $('#frphone').val('');
                $('#fridcard').val('');
                $('#housename').val('');
                $('#houseaddr').val('');
                $('#housenote').val('');
                $('#dayprice').val('');
            },
            saveModal:function () {
                axios.post("http://localhost:8083/save",this.new_house).then(res=>{
                        this.delResult=res.data
                    if (this.delResult.result=='SUCCESS'){
                            this.selectHouse(this.pageNum);
                            this.hideModal();
                            this.clearForm();
                    }else{
                            alert(this.delResult.message)
                    }
                })
            },
            updateHouse:function (id) {
                axios({
                    url:"http://localhost:8083/selectById",
                    method:"get",
                    params:{id:id}
                }).then(res=>{
                    this.new_house=res.data.data;
                    this.showModal();
                })
            }
        }
    })
</script>